@import '../css/variable'
@require '../css/func.styl'
@require '../Ripple/FocusRipple.styl'

.sm-slider
    position: relative
    width: 100%
    height: 24px
    cursor: default
    user-select:none
    outline: none

.sm-slider-bg
.sm-slider-fill
.sm-slider-thumb
    position: absolute
    left: 0
    top: 50%
    width: 100%
    height: 2px
    margin-top: (@height / 2) * -1

.sm-slider-fill
    background-color: $san-primary-color

    .sm-slider.state-disabled &
        background-color: $san-lighter-primary-color

.sm-slider-bg
    background-color: $san-lighter-primary-color

.sm-slider-thumb
    width: 12px
    height: @width
    border-radius: 50%
    cursor: pointer
    background-color: $san-primary-color
    transform: translate(-50%, -50%)
    transition: background 450ms $san-animation-ease-out, border-color 450ms $san-animation-ease-out, width 450ms $san-animation-ease-out, height 450ms $san-animation-ease-out

    .sm-focus-ripple
        width: 36px
        height: @width
        top: 50%
        left: 50%
        margin-top: (@width / 2) * -1
        margin-left: @margin-top

    .sm-slider.variant-active &
        width: 20px
        height: @width

    .sm-slider.variant-start &,
    .sm-slider.state-disabled &
        border: 2px solid $san-lighter-primary-color
        color: $san-lighter-primary-color
        background-color: $md-colors.white

    .sm-slider.state-disabled &
        cursor: default


